
<template>
    <!-- 属性管理 -->
    <div class="view_attribute">
        <card title="属性管理">
            <template #actions>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    placeholder="按属性名查找"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="addAttribute">添加属性</el-button>
            </template>
            <template #default>
                <el-table :data="tableData" @selection-change="handleTableSelect">
                    <el-table-column type="selection" />
                    <el-table-column label="属性名" prop="attrName" />
                    <el-table-column label="可选值" prop="valueSelect" />
                    <el-table-column label="图标" prop="icon" />
                    <el-table-column label="类型">
                        <template #default="{ row }">
                            <el-tag :type="attributeTypes[row.attrType].tagType">
                                {{ attributeTypes[row.attrType].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template #default="{ row }">
                            <el-tag effect="dark" :type="attributeEnabledStates[+row.enable].tagType">
                                {{ attributeEnabledStates[+row.enable].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否检索" prop="searchType">
                        <template #default="{ row }">
                            {{ attributeRetrievalStates[row.searchType] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="快速展示">
                        <template #default="{ row }">
                            {{ row.showDesc ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="text" @click="editAttribute(row)">编辑</el-button>
                            <el-button type="text" @click="toggleEnabledState(row)">
                                {{ attributeEnabledStates[+!row.enable].text }}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #bottom-left>
                <el-button type="danger" @click="disableInBatch" :disabled="isDisablingButtonDisabled"
                    >批量禁用</el-button
                >
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 添加属性对话框 -->
        <el-dialog :visible.sync="visible" :title="dialogTitle" @closed="handleDialogClosed">
            <template #default>
                <el-form label-position="top">
                    <el-row :gutter="12">
                        <el-col :span="8">
                            <el-form-item label="属性名">
                                <el-input v-model="formData.attrName" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="图标">
                                <el-input v-model="formData.icon" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="类型">
                                <el-select v-model="formData.attrType">
                                    <el-option
                                        v-for="(val, key) in attributeTypes"
                                        :key="+key"
                                        :value="+key"
                                        :label="val.text"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="可选值列表（用英文逗号隔开）">
                        <el-input v-model="formData.valueSelect" />
                    </el-form-item>
                    <el-form-item label="备选项">
                        <el-checkbox v-model="formData.enable">是否启用</el-checkbox>
                        <el-checkbox v-model="formData.searchType" :true-label="1" :false-label="2">
                            是否检索
                        </el-checkbox>
                        <el-checkbox v-model="formData.showDesc">快速显示</el-checkbox>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="saveAttribute">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';

let defaultFormData = {
    attrName: '',
    searchType: 1,
    icon: '',
    valueSelect: '',
    attrType: 1,
    enable: true,
    showDesc: false,
};

let defaultFormDataCopied = Object.assign({}, defaultFormData);

export default {
    data() {
        return {
            tableData: [],

            formData: defaultFormData,

            visible: false,
            // 是否在编辑
            editing: false,

            selectedId: [],
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/pms/findAttrPage',
            paginable: true,
            params: {
                queryString: 'attrName',
            },
        }),
    ],

    computed: {
        // 对话框标题
        dialogTitle() {
            return this.editing ? '编辑属性' : '添加属性';
        },

        // 批量禁用按钮禁用状态
        isDisablingButtonDisabled() {
            return !this.selectedId.length;
        },

        // 属性类型
        attributeTypes() {
            return {
                1: { text: '基本属性' },
                2: { text: '基本销售属性', tagType: 'warning' },
                3: { text: '销售属性', tagType: 'success' },
            };
        },

        // 属性启用状态
        attributeEnabledStates() {
            return {
                0: { text: '禁用', tagType: 'info' },
                1: { text: '启用', tagType: 'success' },
            };
        },

        // 属性检索状态
        attributeRetrievalStates() {
            return {
                1: '检索',
                2: '不检索',
            };
        },
    },

    methods: {
        // 添加属性
        addAttribute() {
            this.editing = false;
            this.visible = true;
        },

        // 编辑属性
        editAttribute(row) {
            Object.assign(this.formData, row);
            this.editing = true;
            this.visible = true;
        },

        // 保存属性
        saveAttribute() {
            if (!this.editing) {
                // 不是编辑操作则删除主键
                delete this.formData.attrId;
            }

            this[this.editing ? '$post' : '$put'](
                `/yxl/pms/${this.editing ? 'update' : 'save'}PmsAttr`,
                this.formData
            ).then(res => {
                this.visible = false;
                this.query();
            });
        },

        // 切换启用状态
        toggleEnabledState({ attrId, enable }) {
            this.$post('/yxl/pms/updateEnable', { attrIds: attrId, enable: !enable }).then(this.query);
        },

        // 批量禁用
        disableInBatch() {
            this.$post('/yxl/pms/updateEnable', { attrIds: this.selectedId.toString(), enable: false }).then(
                this.query
            );
        },

        // 处理对话框关闭后
        handleDialogClosed() {
            Object.assign(this.formData, defaultFormDataCopied);
        },

        // 处理表格选择
        handleTableSelect(selectedRows) {
            this.selectedId = selectedRows.map(row => row.attrId);
        },
    },
};
</script>